<template>
  <div class="">
    <h1>tailWindCss</h1>
  </div>
  <ul>
    <li>
      <h2 class="border-solid border-2 border-indigo-600">边框</h2>
    </li>

    <li>
      <h2 class="border-solid border-1 border-red-100 w-1/2 h-16">宽度</h2>
    </li>
    <li>
      <h2 class="bg-red-300">背景</h2>
    </li>
    <li>
      <input type="text" class="placeholder-gray-200" placeholder="你好">
    </li>

    <li>
      <h2>flex --- {{ name }}</h2>
      <div class="flex">
        <div class="w-1/2 border-solid border-2 border-red-400">我占50%</div>
        <div class="w-1/2 border-solid border-2 border-red-400">我占50%</div>
      </div>
    </li>
    <li>dsafdsafdsaf
      <div class="cool-blue">dsfadsaf</div>
    </li>
  </ul>
</template>

<script setup lang="ts">
const name: Ref<string> = ref('huangbiao')
</script>

<style scoped lang="scss">
</style>